<template>
  <!-- 付款统计 -->
  <div id="paymentCount">
    <div class="topBox">
      <el-icon class="icon" color="#F78D42" size="26"
        ><el-icon-caret-right
      /></el-icon>
      <p>付款统计</p>
    </div>
    <scEcharts :option="option"></scEcharts>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
import * as echarts from 'echarts'
export default {
  name: 'paymentCount',
  components: {
    scEcharts
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4',
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
          right: 20,
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', "12月"],
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: 'auto',
            lineStyle: {
              color: ['#F6F8F9']
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: false,
            lineStyle: {
              color: '#999'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#eee'],
              type: "dashed"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        series: [{
          name: '借款月总额',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: ['1200', '1400', '1008', '1411', '1026', '1288', '1300', '800', '1100', '1000', '1118', '1322'],
          itemStyle: {
            normal: {
              color: '#F78D42'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        },]
      }
    }
  },
  props: {
    date: {
      type: String,
      required: true,
      default: () => new Date().getFullYear().toString()
    }
  },
  watch: {
    date (val) {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await this.$API.finance.getPaymentCount.get({ time: this.date })
      let list = data
      let arr = []
      for (let key in list) {
        arr.push(list[key])
      }
      this.option.series[0].data = arr

      // this.option.series[0].data = list
    }
  }
}
</script>
<style lang="scss" scoped>
#paymentCount {
  width: 60%;
  height: 100%;
  padding: 20px 20px 40px 20px;
  border-radius: 8px;
  margin-left: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  .topBox {
    display: flex;
    align-items: center;
    font-size: 18px;
  }
}
</style>